<template>
	<view class="publish-container">
		<view class="publish-card">
			<view class="form-item">
				<text class="label">标题：</text>
				<input 
					type="text" 
					class="input" 
					placeholder="请输入标题" 
					placeholder-style="color: #C3C3C3"
					v-model="formData.title"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">内容：</text>
				<textarea 
					class="textarea" 
					placeholder="请输入内容" 
					placeholder-style="color: #C3C3C3"
					v-model="formData.content"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">图片/视频：</text>
				<view class="media-container">
					<!-- 已上传的媒体预览 -->
					<view 
						v-for="(item, index) in formData.media" 
						:key="index"
						class="preview-item"
					>
						<image 
							v-if="item.type === 'image'"
							:src="item.url" 
							mode="aspectFill"
							class="preview-image"
							@click="previewMedia(item, index)"
						/>
						<video 
							v-else
							:src="item.url"
							class="preview-video"
							@click="previewMedia(item, index)"
						/>
						<view class="delete-icon" @click.stop="handleDelete(index)">×</view>
					</view>
					
					<!-- 上传按钮 -->
					<view 
						v-if="formData.media.length < uploadConfig.maxCount"
						class="upload-box" 
						@click="handleUpload"
					>
						<text class="plus-icon">+</text>
						<text class="upload-text">点击选择上传</text>
					</view>
				</view>
			</view>
		</view>
		
		<button class="publish-btn" @click="handlePublish">发布</button>
	</view>
</template>

<script>
const PLATFORM = uni.getSystemInfoSync().platform;

export default {
	data() {
		return {
			formData: {
				title: '',
				content: '',
				media: []
			},
			uploadConfig: {
				maxCount: 9,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				mediaType: ['image', 'video']
			}
		}
	},
	methods: {
		// 处理上传
		async handleUpload() {
			try {
				if (PLATFORM === 'android' || PLATFORM === 'ios') {
					await this.handleAppUpload();
				} else if (PLATFORM === 'windows' || PLATFORM === 'mac') {
					await this.handlePCUpload();
				} else {
					await this.handleWeChatUpload();
				}
			} catch (error) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
				console.error('Upload error:', error);
			}
		},
		
		// App端上传
		async handleAppUpload() {
			// 调用系统相册或相机
			const result = await uni.chooseImage({
				count: this.uploadConfig.maxCount - this.formData.media.length,
				sizeType: this.uploadConfig.sizeType,
				sourceType: this.uploadConfig.sourceType
			});
			
			if (result.tempFilePaths?.length) {
				const newMedia = result.tempFilePaths.map(path => ({
					type: 'image',
					url: path
				}));
				this.formData.media.push(...newMedia);
			}
		},
		
		// PC端上传
		async handlePCUpload() {
			// 创建input元素
			const input = document.createElement('input');
			input.type = 'file';
			input.accept = 'image/*,video/*';
			input.multiple = true;
			
			input.onchange = (event) => {
				const files = Array.from(event.target.files);
				files.forEach(file => {
					const reader = new FileReader();
					reader.onload = (e) => {
						this.formData.media.push({
							type: file.type.includes('image') ? 'image' : 'video',
							url: e.target.result
						});
					};
					reader.readAsDataURL(file);
				});
			};
			
			input.click();
		},
		
		// 预览媒体
		previewMedia(item, index) {
			if (item.type === 'image') {
				// 图片预览
				uni.previewImage({
					urls: this.formData.media
						.filter(m => m.type === 'image')
						.map(m => m.url),
					current: index
				});
			} else {
				// 视频预览
				uni.navigateTo({
					url: `/pages/video-player/video-player?url=${encodeURIComponent(item.url)}`
				});
			}
		},
		
		// 删除媒体
		handleDelete(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这个文件吗？',
				success: (res) => {
					if (res.confirm) {
						this.formData.media.splice(index, 1);
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					}
				}
			});
		},
		
		// 修改上传方法，添加文件大小限制
		async handleWeChatUpload() {
			try {
				const result = await uni.chooseMedia({
					count: this.uploadConfig.maxCount - this.formData.media.length,
					mediaType: this.uploadConfig.mediaType,
					sourceType: this.uploadConfig.sourceType,
					sizeType: this.uploadConfig.sizeType,
					maxDuration: 60 // 限制视频时长60秒
				});
				
				if (result.tempFiles?.length) {
					// 检查文件大小
					const oversizeFiles = result.tempFiles.filter(file => file.size > 10 * 1024 * 1024); // 10MB限制
					if (oversizeFiles.length) {
						uni.showToast({
							title: '文件大小不能超过10MB',
							icon: 'none'
						});
						return;
					}
					
					const newMedia = result.tempFiles.map(file => ({
						type: file.fileType,
						url: file.tempFilePath,
						size: file.size
					}));
					this.formData.media.push(...newMedia);
				}
			} catch (error) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
				console.error('Upload error:', error);
			}
		},
		
		// 发布
		async handlePublish() {
			if (!this.formData.title.trim()) {
				return uni.showToast({
					title: '请输入标题',
					icon: 'none'
				});
			}
			
			if (!this.formData.content.trim()) {
				return uni.showToast({
					title: '请输入内容',
					icon: 'none'
				});
			}
			
			// 跳转到详情页并传递数据
			uni.navigateTo({
				url: `/packagesActivity/detail/detail?data=${encodeURIComponent(JSON.stringify(this.formData))}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.publish-container {
	min-height: 100vh;
	padding: 15px;
}

.publish-card {
	background-color: #fff;
	border-radius: 15px;
	padding: 15px;
	margin-bottom: 20px;
}

.form-item {
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	
	.label {
		font-size: 14px;
		color: #333;
		font-weight: bold;
		width: 80px;
		padding-top: 10px;
	}
	
	.input {
		flex: 1;
		height: 40px;
		background-color: #fff;
		border-radius: 8px;
		padding: 0 12px;
		font-size: 14px;
		border: 1px solid #eee;
	}
	
	.textarea {
		flex: 1;
		height: 200px;
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		font-size: 14px;
		border: 1px solid #eee;
	}
	
	.upload-box {
		width: 120px;
		height: 120px;
		border: 1px dashed #ddd;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		
		.plus-icon {
			font-size: 28px;
			color: #999;
			margin-bottom: 8px;
		}
		
		.upload-text {
			font-size: 12px;
			color: #999;
		}
	}
}

.publish-btn {
	width: 70%;
	height: 44px;
	background-color: #0863E7;
	color: #fff;
	border-radius: 22px;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30px auto 0;
	border: none;
}

.media-container {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.preview-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.preview-item {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	
	.preview-image, .preview-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.delete-icon {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 20px;
		height: 20px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		cursor: pointer;
		
		&:active {
			opacity: 0.8;
		}
	}
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.03);
		pointer-events: none;
	}
}

.media-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	
	.upload-box {
		cursor: pointer;
		&:active {
			opacity: 0.8;
		}
	}
}
</style> 